import indexStyle from "./index.module.less";
import autofit from "@/utils/autofit";
import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function bigSreen() {
  const leftChartRef = useRef(null);
  const centerChartRef = useRef(null);
  const rightChartRef = useRef(null);

  useEffect(() => {
    autofit.init({ el: "#dashboard", dw: 1920, dh: 1080 });

    const leftChart = echarts.init(leftChartRef.current);
    const centerChart = echarts.init(centerChartRef.current);
    const rightChart = echarts.init(rightChartRef.current);

    const getChartOption = () => ({
      title: {
        text: "ECharts example",
      },
      tooltip: {},
      xAxis: {
        data: ["shirt", "cardigan", "chiffon", "pants", "heels", "socks"],
      },
      yAxis: {},
      series: [
        {
          name: "sales",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });

    leftChart.setOption(getChartOption());
    centerChart.setOption(getChartOption());
    rightChart.setOption(getChartOption());

    window.addEventListener("resize", () => {
      leftChart.resize();
      centerChart.resize();
      rightChart.resize();
    });

    return () => {
      autofit.off();
      leftChart.dispose();
      centerChart.dispose();
      rightChart.dispose();
    };
  }, []);

  return (
    <div id="dashboard" className={indexStyle.root} style={{ display: "flex", height: "100%", overflow: "hidden" }}>
      <h1>自适应大屏幕</h1>
      <div className={indexStyle.relativeps} style={{ flex: 1, height: "500px" }}>
        <div ref={leftChartRef} style={{ flex: 1, height: "100%", width: "100%" }}></div>
        <div className={indexStyle.obps}></div>
      </div>
      <div ref={centerChartRef} style={{ flex: 1, height: "500px" }}></div>
      <div ref={rightChartRef} style={{ flex: 1, height: "500px" }}></div>
    </div>
  );
}
